import { storiesOf } from "@storybook/vue";
import { action } from "@storybook/addon-actions";
import { linkTo } from "@storybook/addon-links";
import { AMapManager } from "vue-amap";
import VueAMap from "vue-amap";
import { withCssResources } from "@storybook/addon-cssresources";
import Centered from "@storybook/addon-centered";
import {
  withKnobs,
  text,
  number,
  boolean,
  array,
  select,
  color,
  date,
  button
} from "@storybook/addon-knobs";
storiesOf("百度地图控件测试", module)
  .addDecorator(Centered)
  .addDecorator(withKnobs)
  .addDecorator(
    withCssResources({
      cssresources: [
        {
          name: `bluetheme`,
          code: `<style>
          .bm-view {
            width: 500px;
            height: 500px;
          }
          .amap-demo {
            width: 500px;
            height: 500px;
          }
          .search-box {
            position: absolute;
            top: 25px;
            left: 20px;
          }
          
          .amap-page-container {
            position: relative;
          }
          </style>`,
          picked: false
        }
      ]
    })
  )
  .add("template", () => {
    let zoom = number("zoom", 2.25);
    return {
      template: `
        <div class="amap-page-container">
          <el-amap
            ref="map"
            :zoom="${zoom}"
            class="amap-demo"
          />
      </div> `
    };
  });
